$(document).ready(function() {
  // 发送按钮被点击时干这些事儿
  $('#submit').click(function() {
    // 从页面元素中获得数据
    request_name = $('#request-name').val();
    request_gender = $('#request-gender').val();

    // 保存为字典格式
    var send_info = {
      'name': request_name,
      'gender': request_gender
    };

    // 发起 AJAX 请求
    $.ajax({
      type: 'POST',    // 请求方式
      url: 'http://127.0.0.1:5000/json',    // 另一个服务器 URL
      crossDomain: true,    // 允许跨域请求
      data: JSON.stringify(send_info),    // 将数据 JSON 化
      dataType: 'json',

      // 发送数据并成功收到响应时干嘛？
      success: function(responseData, textStatus, jqXHR) {
        console.log(textStatus);

        // 用 '.' 加字段名直接从 responseData 中取得数据
        var response_name = responseData.name;
        var response_gender = responseData.gender;

        // 控制台打印结果，供肉眼检查
        console.log(response_name);
        console.log(response_gender);

        // 将获得的响应结果添加到页面相应的元素中
        $('#response-name').val(response_name);
        $('#response-gender').val(response_gender);

        console.log("Success!");
      },

      // 响应失败时干嘛？
      error: function (responseData, textStatus, errorThrown) {
        console.log(responseData);
        console.log(textStatus);
        console.log(errorThrown);
        // 控制台查看响应文本，排查错误
        console.log(responseData.responseText);
        console.log('Oh, POST failed for some reason.');
      }
    });
  });
});
